<template>
	<section>
		<el-card class="box-card">
			<el-form :model="homeBanner" ref="homeBanner">
				<el-form-item>
					<label>轮播图片</label>
					<el-upload class="avatar-uploader" action="//jsonplaceholder.typicode.com/posts/" accpet="image/*" list-type="picture-card"
						:on-preview="handlePreview" :on-success="handleHannerPicUploadSuccess" :show-file-list="false">
						<img v-if="hannerPicUrl" :src="hannerPicUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="轮播序号">
					<el-input v-model="homeBanner.position"></el-input>
					<el-checkbox v-model="homeBanner.available" checked>是否启用</el-checkbox>
				</el-form-item>
				<template v-if="false">
					<el-form-item label="大B用户">
						<el-input readonly="true" v-model="homeBanner.dealerName"></el-input>
					</el-form-item>
				</template>

				<template v-if="false">
					<el-form-item label="轮播图超链接">
						<el-input type="textarea" v-model="homeBanner.newsUrl"></el-input>
					</el-form-item>
				</template>
				<template v-if="homeBanner.bannerType === 'products'">
					<el-form-item label="商品编号">
						<a href="">2000000</a>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input :disabled="true" v-model="homeBanner.productName"></el-input>
					</el-form-item>
					<el-form-item label="商品状态">
						<el-input :disabled="true" v-model="homeBanner.productItem.saleStatusText"></el-input>
					</el-form-item>
				</template>
				<el-form-item label="城市">
					<el-input v-if="homeBanner.bannerType !== 'news'" :disabled="true" v-model="homeBanner.cityName"></el-input>
					<el-select v-else v-model="homeBanner.cityName" filterable remote placeholder="请输入关键词" :remote-method="searchCities" :loading="cityLoading">
						<el-option v-for="city in cities" :key="city.code" :label="city.name" :value="city.name"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<el-col :span="24" class="toolbar">
				<el-button type="primary" @click="submit">更新</el-button>
				<el-button type="danger" @click="deleteHomeBanner($route.params.id)">确认删除</el-button>
				<el-button class="flow-right" @click.native="back">返回</el-button>
			</el-col>
		</el-card>
		<el-dialog title="预览" v-model="previewVisible">
			<img :src="previewImageUrl" v-if="previewVisible" style="width: 100%">
		</el-dialog>
	</section>
</template>
<style type="text/css" scoped>
	.avatar {
		width: 100%;
	}
</style>

<script type="text/javascript">
	export default {
		created() {
			let id = this.$route.params.id
			let isNewPage = !!!id;
			if (this.isNewPage) {
				return
			}

			this.axios.get(`/home_banners/${id}`).then(response => {
				this.homeBanner = response.data
			})
		},
		data() {
			return {
				fileList: [],
				cities: [],
				cityLoading: false,
				homeBanner: {
					id: null,
					position: 0,
					available: true,
					bannerType: null,
					bannerTypeText: null,
					cityCode: null,
					cityName: null,
					productItemId: null,
					productName: null,
					productItem: {},
					dealerId: null,
					dealerName: null
				},
				previewVisible: false,
				previewImageUrl: "",
				hannerPicUrl: ""
			}
		},
		methods: {
			handlePreview(file) {
				this.previewImageUrl = file.url;
				this.previewVisible = true;
			},
			handleHannerPicUploadSuccess(response, file) {
				// fileList.length = 0;
				// fileList.push(file);
				this.hannerPicUrl = URL.createObjectURL(file.raw);
			},
			searchCities(key) {
				let params = {
					key: key
				}
				this.cityLoading = true
				this.axios.get("/cities", { params: params }).then(response => {
					this.cityLoading = false
					this.cities = response.data
				})
			},
			submit: id => {
				var self = this
				self.$refs.homeBanner.validate((valid) => {
					if (!valid) {
						return
					}
					self.$confirm('确认提交吗？', '提示').then(() => {
						self.editLoading = true
						if (self.isNewPage) {
							self.createHomeBanner()
						} else {
							self.updateHomeBanner(self.$route.params.id)
						}
					})
				})
			},
			createHomeBanner: () => {
				this.axios.post(`/home_banner`, this.homeBanner).then(response => {
					this.editLoading = false
					this.$message({
						title: '成功',
						message: '创建成功',
						type: 'success'
					})
				}).then(() => back())
			},
			updateHomeBanner: id => {
				this.axios.patch(`/home_banner/${id}`, this.homeBanner).then(response => {
					this.editLoading = false
					this.$message({
						title: '成功',
						message: '更新成功',
						type: 'success'
					})
				}).then(() => back())
			},
			deleteHomeBanner: id => {
				console.log(id)
			},
			back: () => {
				return window.history.back()
			}
		}
	}

</script>